<template><!--  -->
	<view class="content">
		<!-- <view class="one">
			<view>开始时间:<text>2021-11-26</text></view>
			<view>结束时间:<text>2021-11-26</text></view>
		</view> -->
		<view class="two">
			<view class="title">
				<view style="color: #707070;display: flex;">
					<text>SN:{{title}}</text>
					<view class="copy" @tap='copySn'>复制</view>
					<!-- <view @tap="copySn">复制</view> -->
					<view class="copy">{{remarks.substring(0,8)}}</view>
				</view>
				
			</view>
			<view class="time">
				<view class="time-info">
					<view @tap='selectDate(1)' :class="date == 1?'active':''">今日</view>
					<view @tap='selectDate(2)' :class="date == 2?'active':''">昨日</view>
					<view @tap='selectDate(3)' :class="date == 3?'active':''">本周</view>
					<view @tap='selectDate(4)' :class="date == 4?'active':''">本月</view>
				</view>
				<viw class="time-min">
					<view @tap='selectHour(1)' :class="Hour == 1?'active':''">5m</view>
					<view @tap='selectHour(2)' :class="Hour == 2?'active':''">1h</view>
				</viw>
			</view>
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt">
				<view class="qiun-title-dot-light">
					<view>上行带宽(Mbps)</view>
					<view  v-if="date < 3 && Hour == 1">{{r95}}</view>
				</view>
			</view>
			<view class="qiun-charts" v-if="show2">
				<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" disable-scroll=true @touchstart="touchLineA"
				 @touchmove="moveLineA" @touchend="touchEndLineA"></canvas>
				<!-- 使用图表拖拽功能时，建议给canvas增加disable-scroll=true属性，在拖拽时禁止屏幕滚动 -->
			</view>
		</view>
		<view class="three">
			<view class="box-info" v-if="boxinfo.type == 3" @tap='comfim3()'><view class='title'>激活卡</view><view>{{card}}</view></view>
			<view class="box-info"><view class='title'>分组</view><view>{{boxinfo.group_name}}</view></view>
			<view class="box-info"><view class='title'>NAT类型</view><view>NAT{{boxinfo.nat}}</view></view>
			<view class="box-info"><view class='title'>磁盘使用空间</view><view>{{disk}}GB</view></view>
			<view class="box-info"><view class='title'>磁盘总空间</view><view>{{total_disk}}GB</view></view>
			<!-- <view class="box-info"><view class='title'>剩余内存</view><view>{{free_memory}}G</view></view>
			<view class="box-info"><view class='title'>总内存</view><view>{{total_memory}}G</view></view> -->
			<view class="box-info"><view class='title'>测速带宽</view><view>{{test}}Mbps</view></view>
			<view class="box-info"><view class='title'>服务带宽</view><view>{{upload}}Mbps</view></view>
			<!-- <view class="box-info"><view class='title'>CPU评级</view><view>{{boxinfo.cpu_score}}</view></view> -->
			<view class="box-info"><view class='title'>出口IP</view><view>{{boxinfo.remote_ip}}</view></view>
			<view class="box-info"><view class='title'>运营商</view><view>{{boxinfo.province}}{{boxinfo.isp}}</view></view>
		</view>
		
		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				备注修改
			</view>
			<view class="content1">
				<input type="text" v-model="newRemark">
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
		<view class="foot">
			<view @tap="updateRemark()"><uni-icons type="compose" class="icon" size='30' color='#999999'></uni-icons><view>修改备注</view></view>
			<view @tap='toMove()'> <uni-icons type="folder-add" class="icon" size='30' color='#999999'></uni-icons> <view>移动分组</view></view>
			<view @tap="removeGroup()"> <uni-icons type="trash" class="icon" size='30' color='#999999'></uni-icons> <view>移除设备</view> </view>
			<view>
				<picker mode="selector" :range="yewu"  @change="updateYewu" fields='month'>
					 <uni-icons type="settings" class="icon" size='30' color='#999999'></uni-icons> 
					<view class="uni-input">切换业务</view>
				</picker>
			</view>
			
		</view>
		
		
		<view class="box" v-if="show1"  @tap="coneal1"></view>
		<view class="modal1" v-if="show1">
			<view class="title">
				提示
			</view>
			<view class="content">
				确定要将设备移除设备吗！
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal1">取消</view>
				<view class="submit" @tap="comfim1">确认</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import uCharts from '../../components/u-charts/u-charts.js';
	var _self;
	var canvasObj = {};
	export default{
		data(){
			return{
				title:'',
				cWidth: '',
				cHeight: '',
				cWidth2: '', //横屏图表
				cHeight2: '', //横屏图表
				cWidth3: '', //圆弧进度图
				cHeight3: '', //圆弧进度图
				arcbarWidth: '', //圆弧进度图，进度条宽度,此设置可使各端宽度一致
				gaugeWidth: '', //仪表盘宽度,此设置可使各端宽度一致
				tips: '',
				pixelRatio: 1,
				serverData: '',
				itemCount: 30, //x轴单屏数据密度
				sliderMax: 50,
				maxY:0,
				minY:0,
				id:'',
				boxinfo:[],
				test:'0',
				upload:'0',
				disk:'0',
				total_disk:'0',
				free_memory:'0',
				total_memory:'0',
				remark:'',
				date:1,
				Hour:1,
				r95:'',
				remarks:'',
				newRemark:'',
				show:false,
				clickId:0,
				lineData:[],
				show1:false,
				show2:true,
				card:'点击领取',
				yewu:['B',"D"],
				yewuIndex:0
			}
		},
		onLoad(opthion) {
			_self = this;
			this.id = opthion.id
			this.remarks=opthion.remarks
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function(res) {
					if (res.pixelRatio > 1) {
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio = 2;
					}
				}
			});
			//#endif
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
			this.cWidth2 = uni.upx2px(700);
			this.cHeight2 = uni.upx2px(1100);
			this.cWidth3 = uni.upx2px(250);
			this.cHeight3 = uni.upx2px(250);
			this.arcbarWidth = uni.upx2px(24);
			this.gaugeWidth = uni.upx2px(30);
			//this.getBoxInfo(opthion.id)
		},
		onShow() {
			this.getBoxInfo(this.id)
		},
		onReady() {
			this.getLineInfo(1,1)
		},
		methods:{
			showLineA(canvasId, chartData) {
				canvasObj[canvasId] = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					padding: [15, 50, 0, 15],
					
					legend: {
						show: false,
						padding: 5,
						lineHeight: 11,
						margin: 5,
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: false, //开启图表拖拽功能
					xAxis: {
						disabled:true,
						disableGrid: true,
						type: 'grid',
						gridType: 'dash',
						itemCount: 5,
						scrollShow: false,
						scrollAlign: 'left',
						gridEval:100
						//scrollBackgroundColor:'#F7F7FF',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条背景颜色,默认为 #EFEBEF
						//scrollColor:'#DEE7F7',//可不填写，配合enableScroll图表拖拽功能使用，X轴滚动条颜色,默认为 #A6A6A6
					},
					yAxis: {
						//disabled:true
						gridType: 'none',
						splitNumber: 5,
						min: this.minY,
						max: this.maxY,
						format: (val) => {
							return val.toFixed(0)
						}
					},
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						lineStyle: 'straight'
					},
				});		
			},
			
			touchLineA(e) {
				canvasObj['canvasLineA'].scrollStart(e);
			},
			
			moveLineA(e) {
				canvasObj['canvasLineA'].scroll(e);
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			touchEndLineA(e) {
				canvasObj['canvasLineA'].scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvasObj['canvasLineA'].showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			
			fillData(data) {
				this.serverData = data;
				this.tips = data.tips;
				let LineA = {
					categories: [],
					series: []
				};
				LineA.categories = data.LineA.categories;
				LineA.series = data.LineA.series;
				console.log(LineA)
				this.showLineA("canvasLineA", LineA);
			},
			
			getBoxInfo(id){
				uni.showLoading({
				    title:"加载中"
				})
				this.$api.interfaceApi('getBoxInfo')({
					id:id
				}).then(res=>{
					console.log(res)
					this.boxinfo = res.data
					this.test = parseFloat(res.data.test_bandwidth*8/1024).toFixed(2)
					this.upload = parseFloat(res.data.upload_bandwidth*8/1024).toFixed(2)
					this.disk = parseFloat(res.data.task_disk_size/1024).toFixed(2)
					this.total_disk = parseFloat(res.data.total_disk_size/1024).toFixed(2)
					this.free_memory = parseFloat(res.data.free_memory/1024).toFixed(2)
					this.total_memory = parseFloat(res.data.total_memory/1024).toFixed(2)
					this.title = res.data.name
					this.remark = res.data.remark
					uni.hideLoading()
				})
			},
			
			comfim3(){
				this.$api.interfaceApi('receiveCard')({
					name:this.title
				}).then(res=>{
					this.card=res.data
				})
			},
			
			getLineInfo(index,type){
				this.$api.interfaceApi('getLineInfo')({
					id:this.id,
					type:index,
					span:type
				}).then(res=>{
					this.maxY = res.data.max
					this.minY = res.data.min
					this.r95 = res.data.ri
					this.lineData = res.data.list
					console.log(res.data.list)
					_self.fillData(res.data.list);
				})
			},
		
			selectDate(index){
				switch (index) {
					case 1:
						this.date = 1;
						this.getLineInfo(1,this.Hour)
						break;
					case 2:
						this.date = 2;
						this.getLineInfo(2,this.Hour)
						break;
					case 3:
						this.date = 3;
						this.getLineInfo(3,this.Hour)
						break;
					case 4:
						this.date = 4;
						this.getLineInfo(4,this.Hour)
						break;
				}
			},
			
			selectHour(index){
				switch (index) {
					case 1:
						this.Hour = 1;
						this.getLineInfo(this.date,1)
						
						break;
					case 2:
						this.Hour = 2;
						this.getLineInfo(this.date,2)
						break;
				}
			},
			
			copySn(){
				uni.setClipboardData({
				    data: this.title,
				    success: function (res) {
				        uni.showToast({
				        	title: '内容已复制',
				        	icon:'none'
				        });
				    },
					fail(res) {
						console.log(res)
					}
				});
			},
			updateRemark(){
				this.clickId = this.id;
				this.show = true
				this.show2 = false
				this.newRemark = this.remarks
			},
			//移除分组
			removeGroup(){
				this.show1 = true
				this.show2 = false
			},
			
			// 切换业务
			updateYewu(e){
				var _this = this
				uni.showModal({
					title:'温馨提示',
					content: '更换业务会清除原有数据',
					success: function (res) {
						if (res.confirm) {
							_this.yewuIndex = e.detail.value
							_this.$api.interfaceApi('updateYewu')({
								id:_this.id,
								yewu:_this.yewu[e.detail.value]
							}).then(res=>{
							
								uni.showToast({
									icon:'none',
									title:res.msg
								})
							})
						}
					}
				})
			
			},
			
			coneal1(){
				this.show1 = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			comfim1(){
				this.$api.interfaceApi('removeGroup')({
					id:this.id
				}).then(res=>{
					this.show1 = false
					this.show2 = true
					uni.showToast({
						icon:'none',
						title:res.msg
					})
					this.fillData(this.lineData)
				})
			},
			
			toMove(){
				uni.navigateTo({
					url:`/pages/equipment/move?id=${this.id}&gid=${this.boxinfo.gid}`
				})
			},
			comfim(){
				if(this.newRemark == ''){
					uni.showToast({
						title:"名称不能为空",
						icon:"none"
					})
					return
				}
				
				this.$api.interfaceApi('updateRemark')({
					'id':this.clickId,
					'remark':this.newRemark
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					if(res.code == 1){
						this.fillData(this.lineData)
						this.newRemark = ''
						this.show = false
						this.show2 = true
					}
				})
			},
			coneal(){
				this.newRemark = ''
				this.show = false
				this.show2 = true
				this.fillData(this.lineData)
			},
			
			
		}
	}
</script>

<style lang="less">
	.content{
		padding: 40rpx;
		.one{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			view{
				background-color: #FFFFFF;
				padding: 10rpx;
				border-radius: 10rpx;
				text{
					color: #007AFF;
				}
			}
		}
		.two{
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 10rpx;
			border-radius: 10rpx;
			.time{
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				display: flex;
				justify-content: space-between;
				
				.time-info{
					width: 70%;
					display: flex;
					justify-content: space-between;
					.active{
						color: #007AFF;
						padding-bottom: 5rpx;
						box-sizing: border-box;
						border-bottom: 6rpx solid #007AFF;
					}
				}
				.time-min{
					
					display: flex;
					justify-content: center;
					color: #007AFF;
					view:nth-child(1){
						text-align: center;
						width: 80rpx;
						height: 50rpx;
						line-height: 50rpx;
						border: 1rpx solid #007AFF;
						border-radius: 10rpx 0 0 10rpx;
					}
					view:nth-child(2){
						text-align: center;
						width: 80rpx;
						height: 50rpx;
						line-height: 50rpx;
						border: 1rpx solid #007AFF;
						border-radius: 0rpx 10rpx 10rpx 0rpx;
					}
					
					.active{
						background-color: #007AFF;
						color: #FFFFFF;
					}
				}
			}
			.title{
				display: flex;
				padding: 10rpx 10rpx;
				box-sizing: border-box;
				justify-content: space-between;
				
				.copy{
					font-size: 28rpx;
					margin-left: 10rpx;
					color: #006adc;
				}
			}
		}
		.three{
			margin-top: 20rpx;
			margin-bottom: 230rpx;
			background-color: #FFFFFF;
			padding: 10rpx;
			border-radius: 10rpx;
			
			.box-info{
				display: flex;
				justify-content: space-between;
				margin: 10rpx 10rpx;
				border-bottom: 2rpx solid #eeeeee;
				padding: 10rpx;
				
				.title{
					color:#999999;
				}
			}
		}
		
		.qiun-padding {
			padding: 2%;
			width: 96%;
		}
		
		.qiun-wrap {
			display: flex;
			flex-wrap: wrap;
		}
		
		.qiun-rows {
			display: flex;
			flex-direction: row !important;
		}
		
		.qiun-columns {
			display: flex;
			flex-direction: column !important;
		}
		
		.qiun-common-mt {
			margin-top: 10rpx;
		}
		
		.qiun-bg-white {
			background: #FFFFFF;
		}
		
		.qiun-title-bar {
			width: 96%;
			padding: 10rpx 2%;
			flex-wrap: nowrap;
		}
		
		.qiun-title-dot-light {
			border-left: 10rpx solid #0ea391;
			padding-left: 10rpx;
			font-size: 32rpx;
			color: #000000;
			display: flex;
		}
		
		/* 通用样式 */
		.qiun-charts {
			/* width: 750rpx; */
			/* width:100%; */
			height: 500rpx;
			background-color: #FFFFFF;
		}
		
		.charts {
			/* width: 750rpx; */
			width:100%;
			height: 500rpx;
			background-color: #FFFFFF;
		}
		
		/* 横屏样式 */
		.qiun-charts-rotate {
			width: 700rpx;
			height: 1100rpx;
			background-color: #FFFFFF;
			padding: 25rpx;
		}
		
		.charts-rotate {
			width: 700rpx;
			height: 1100rpx;
			background-color: #FFFFFF;
		}
		
		/* 圆弧进度样式 */
		.qiun-charts3 {
			/* width: 750rpx;
			width:100%; */
			height: 250rpx;
			background-color: #FFFFFF;
			position: relative;
		}
		
		.charts3 {
			position: absolute;
			width: 250rpx;
			height: 250rpx;
			background-color: #FFFFFF;
		}
		
		.qiun-tip {
			display: block;
			width: auto;
			overflow: hidden;
			padding: 15rpx;
			height: 30rpx;
			line-height: 30rpx;
			margin: 10rpx;
			background: #ff9933;
			font-size: 30rpx;
			border-radius: 8rpx;
			justify-content: center;
			text-align: center;
			border: 1px solid #dc7004;
			color: #FFFFFF;
		}
		
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 9998;
		}
		.modal{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 70%;
			height: 260rpx;
			position: absolute;
			top: 35%;
			left: 15%;
			z-index: 9999;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content1{
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					width: 50%;
					text-align: center;
				}
				.submit{
					color: #007AFF;
					width: 50%;
					text-align: center;
				}
			}
		}
		
		.modal1{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 70%;
			height: 320rpx;
			position: absolute;
			top: 35%;
			left: 15%;
			z-index: 9999;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content1{
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					width: 50%;
					text-align: center;
				}
				.submit{
					color: #007AFF;
					width: 50%;
					text-align: center;
				}
			}
		}
		
		
		
	}
	
	.foot{
		width: 100%;
		height: 200rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		padding:10rpx 80rpx;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		view{
			font-size: 26rpx;
			color: #999999;
		}
		.icon{
			margin: 0 20rpx;
		}
	}
</style>
